<template>
  <div id="app">
    <Category title="美食">
      <!-- img样式可以写在App组件里，也可以写在Category组件里，前者为解析后带上样式放在slot处，后者为先解析放在slot处再应用样式 -->
      <img src="./news_logo.png" alt="" />
      <a href="javascript:;">更多</a>
    </Category>

    <Category title="游戏">
      <ul>
        <li v-for="(item, index) in games" :key="index">{{ item }}</li>
      </ul>
    </Category>

    <Category title="电影"></Category>
  </div>
</template>
<script>
import Category from "./components/Category.vue";
export default {
  name: "App",
  data() {
    return {
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
      films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《尚硅谷》"],
    };
  },
  components: {
    Category,
  },
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
#app {
  display: flex;
  justify-content: space-around;
}
image {
  width: 100%;
}
</style>

